<template>
	<view class="container">
		<view class="hd">
			<image mode="widthFix" class="pic" src="@/static/images/logo.png"></image>
		</view>
		<view class="bd uni-list">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-left justify">手机号</view>
				<view class="uni-list-cell-db">
					<input type="number" class="uni-input" v-model="account" placeholder="请输入手机号"
						placeholder-style="color:#CACBCD" />
				</view>
				<button class="yzm" :disabled="disabled" @click="getCode" plain="true">{{ text }}</button>
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-left justify">验证码</view>
				<view class="uni-list-cell-db"><input type="number" class="uni-input" v-model="captcha"
						placeholder="请输入短信验证码" placeholder-style="color:#CACBCD" /></view>
			</view>
			<!-- <view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-left justify">密码</view>
				<view class="uni-list-cell-db">
					<input type="text" :password="isShow" class="uni-input" placeholder="请输入密码"
						placeholder-style="color:#CACBCD" @input="replaceInput" v-model="password" />
				</view>
				<view class="jichu">
					<image class="collection" mode="widthFix" src="@/static/images/eye.png" v-show="showUpImg"
						@click="changePwd"></image>
					<image class="collection" mode="widthFix" src="@/static/images/eye_on.png" v-show="!showUpImg"
						@click="changePwd"></image>
				</view>
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">
					<view class="p">密码长度8-32位，须包含数字、字母2种元素</view>
				</view>
			</view> -->
		</view>
		<view class="ft">
			<button type="primary" :class="['btn','text-white', disableds ? 'bg-gray' : 'bg-color']"
				:disabled="disableds" @click="register">注册</button>
		</view>
	</view>
</template>


<script>
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import Routine from '@/libs/routine';
	import {
		getRand,
		getRandom
	} from '@/api/common';
	import {
		regPhone
	} from '@/api/user';
	import {
		auth
	} from '@/api/wechat';
	export default {
		name: 'Register',
		mixins: [sendVerifyCode],
		data() {
			return {
				showUpImg: true,
				isShow: true,
				disableds: false,
				account: "",
				password: "",
				captcha: "",
				random: "",
				code: "",
			}
		},
		onLoad() {
			let that = this;

		},
		onShow() {

		},
		methods: {
			changePwd: function() {
				this.isShow = !this.isShow;
				this.showUpImg = !this.showUpImg
			},

			/**
			 * @param {Object} code
			 * 获取openid
			 */
			getAuth(code) {
				return new Promise((resolve, reject) => {
					let that = this;
					auth({
						wxCode: code
					}).then(res => {
						resolve(res.value);
					}).catch(err => {
						reject(err)
					})
				});
			},

			/**
			 * 注册
			 */
			register() {
				let that = this;
				if (!that.account) return that.$util.Tips({
					title: '请输入手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!that.captcha) return that.$util.Tips({
					title: '请输入验证码'
				});
				if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
					title: '请输入正确的验证码'
				});
				// if (!that.password) return that.$util.Tips({
				// 	title: '请输入密码'
				// });
				// if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,32}$/i.test(that.password)) return that.$util.Tips({
				// 	title: '请输入8-32位字母加数字组合'
				// });
				uni.showLoading({
					title: '正在注册中'
				});
				
				Routine.getCode().then(code => {
					that.getAuth(code).then(res => {
						regPhone({
							userPhone: that.account,
							xcxOpenId: res.openId,
							unionId: res.unionid,
							passWord: that.password,
							randCode: that.captcha
						}).then(res => {
							uni.hideLoading();
							that.$util.Tips({
								title: '注册成功'
							}, {
								tab: 3
							});
						}).catch(err => {
							uni.hideLoading();
							that.$util.Tips({
								title: err
							});
						})
					}).catch(err => {
						that.$util.Tips({
							title: err
						})
						uni.hideLoading();
					})
				})
			},
			/**
			 * 获取验证码
			 * 先获取随机码去校验才能得到验证码
			 */
			async getCode() {
				let that = this;
				if (!that.account) return that.$util.Tips({
					title: '请输入手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				
				/**
				 * 获取随机数
				 */
				await that.getRandom(that.account);
				/**
				 * 发送验证码
				 */
				await getRand({
					userPhone: that.account,
					randType: 'REG_PHONE',
					randomCode: that.random
				}).then(res => {
					that.$util.Tips({
						title: '发送成功'
					});
					that.sendCode();
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				})
			},

			/**
			 * 获取随机码
			 */
			async getRandom(account) {
				let that = this;
				await getRandom({
					userPhone: account,
				}).then(res => {
					that.random = that.handleRandom(res.value);
					console.log(that.random);
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				});
			},
			/**
			 * 处理随机码
			 * 取随机码的第1/5/9/13四个字符
			 */
			handleRandom(code) {
				let str = '';
				str += code.substr(0, 1);
				str += code.substr(4, 1);
				str += code.substr(8, 1);
				str += code.substr(12, 1);
				return str;
			}
		}
	}
</script>

<style>
	.container .hd {
		text-align: center;
		padding: 60rpx 0;
	}

	.container .hd image {
		width: 300rpx;
		height: 371rpx;
	}

	.uni-list::before,
	.uni-list::after {
		display: none;
	}

	.container .bd image {
		width: 24rpx;
		height: 24rpx;
	}

	.container .bd .p {
		color: #BDBDBD;
		font-size: 24rpx;
	}

	.container .bd .uni-list-cell-left {
		padding-left: 0;
	}

	.container .bd .yzm {
		color: #06A972;
		font-size: 28rpx;
		border: 0;
		background: transparent;
	}

	.container .ft {
		padding: 60rpx 60rpx 0;
	}

	.justify {
		width: 80rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: justify;
		text-align-last: justify;
		text-justify: inter-ideograph;
	}
</style>
